<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>数据库更新</title>
    <link rel="stylesheet" href="/assets/user/component/pear/css/pear.css" /> <!-- 为了layui.use -->
    <style>
        /* 全局样式 */
        body {
            background: linear-gradient(to bottom, #141e30, #243b55);
            color: #fff;
            font-family: 'Roboto', sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            overflow: hidden;
            transition: all 0.3s ease;
        }

        /* 更新卡片 */
        .update-card {
            width: 600px;
            background-color: rgba(255, 255, 255, 0.06);
            border-radius: 10px;
            padding: 40px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
            backdrop-filter: blur(5px);
            border: 1px solid rgba(255, 255, 255, 0.08);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        /* 标题 */
        .update-title {
            font-size: 24px;
            font-weight: 500;
            margin-bottom: 20px;
            text-align: center;
        }

        /* 进度条 */
        .progress-bar {
            width: 100%;
            height: 10px;
            background-color: rgba(255, 255, 255, 0.1);
            border-radius: 5px;
            overflow: hidden;
            margin-bottom: 20px;
        }

        .progress-bar-inner {
            width: 0%;
            height: 100%;
            background: linear-gradient(to right, #6a5af9, #4589f3);
            transition: width 0.3s ease;
        }

        /* 状态信息 */
        .status-message {
            font-size: 16px;
            margin-bottom: 10px;
        }

        /* 错误信息 */
        .error-message {
            font-size: 14px;
            color: #f44336;
            margin-bottom: 10px;
        }

        /* 按钮 */
        .update-button {
            width: 100%;
            padding: 14px 20px;
            font-size: 18px;
            font-weight: 500;
            color: #fff;
            background: linear-gradient(to right, #6a5af9, #4589f3);
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: background 0.3s ease, box-shadow 0.3s ease;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
        }

        .update-button:hover {
            background: linear-gradient(to left, #6a5af9, #4589f3);
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
        }
    </style>
</head>
<body>

    <div class="update-card">
        <h2 class="update-title">数据库更新</h2>
        <div class="progress-bar">
            <div class="progress-bar-inner" id="progressBar"></div>
        </div>
        <div class="status-message" id="statusMessage">正在检测数据库版本...</div>
        <div class="error-message" id="errorMessage"></div>
        <button class="update-button" id="updateButton">开始更新</button>
    </div>

    <script src="/assets/user/component/layui/layui.js"></script>
    <script src="/assets/user/component/pear/pear.js"></script>
    <script src="/assets/js/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            let progressBar = $('#progressBar');
            let statusMessage = $('#statusMessage');
            let errorMessage = $('#errorMessage');
            let updateButton = $('#updateButton');

            //更新按钮点击事件
            updateButton.on('click', function(){
                updateButton.prop('disabled', true).text('更新中...');
                errorMessage.text('');

                $.ajax({
                    url: './update.ajax.php',
                    type: 'POST',
                    dataType: 'json',
                    success: function(res){
                        if(res.code === 200){
                            statusMessage.html(res.msg);
                            progressBar.width('100%');
                            updateButton.prop('disabled', true).text('更新完成');
                        } else {
                            errorMessage.html(res.msg);
                            updateButton.prop('disabled', false).text('重试更新');
                        }
                    },
                    error: function(xhr, status, error){
                        errorMessage.text('网络错误，请检查网络连接！');
                        updateButton.prop('disabled', false).text('重试更新');
                        console.error('AJAX 请求出错:', status, error);
                    }
                });
            });
        });
    </script>
</body>
</html>
